<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog title="修改" :visible.sync="visibility" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户昵称" prop="nickName">
            <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30"/>
          </el-form-item>
        </el-col>
        <el-col :span="12"  v-if="!(isSpecial)" >
          <el-form-item label="所属门店" prop="deptId">
            <el-select placeholder="请选择员工所属门店信息" v-model="form.deptId">
              <el-option v-for="item in storesOption" :label="item.name"
                         :value="item.deptId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户名称" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="11"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色">
            <el-select v-model="form.roleIds" multiple placeholder="请选择角色" disabled v-if="isSpecial">
              <el-option
                v-for="item in roleAllOption"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
                :disabled="item.status == 1"
              >
              </el-option>
            </el-select>
            <el-select v-model="form.roleIds" multiple placeholder="请选择角色" v-else>
              <el-option
                v-for="item in roleAllOption"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
                :disabled="item.status == 1"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户性别">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option
                v-for="dict in dict.type.sys_user_sex"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.value"
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {getPlatformRoles} from "@/api/system/role";
import {storesRoleList} from "@/api/merchant/stores";

export default {
  name: 'editStaff',
  props: ['dict'],
  data() {
    return {
      isSpecial: false,
      visibility: false,
      rules: {},
      form: {},
      roleOptions: [],
      roleAllOption: [],
      storesOption: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    open(response) {
      this.isSpecial = false
      this.form = response.data
      this.form.roleIds = response.roleIds
      for (let i = 0; i < this.form.roles.length; i++) {
        if (this.form.roles[i].roleKey == 'special') {
          // 特邀商户无法修改自己用户角色
          this.isSpecial = true
          break
        }
      }
      this.roleAllOption = response.data.roles
      this.$set(this.form, "postIds", response.postIds);
      this.visibility = true
      this.form.password = "";
      console.log('this.form', this.form)
    },
    close() {
      this.visibility = false
    },
    submitForm() {

    },
    cancel() {
      this.visibility = false
    },

    // 初始化数据
    init() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: []
      };
      getPlatformRoles().then(res => {
        if (res.code == 200) {
          this.roleOptions = res.data
        }
      })
      storesRoleList({
        pageNum: 1,
        pageSize: 100,
      }).then(res => {
        if (res.code == 200) {
          this.storesOption = res.rows
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">

</style>
